<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>superman</title>
<jsp:include page="header.jsp"></jsp:include>
<script type="text/javascript">
$(function(){
	//分页显示用户列表
	$('#dg').datagrid({    
	    url:'superman/list', 
	   		title:'用户列表',
			iconCls:'icon-save',
			fitColumns:true,
			striped:true,
			pagination:true,
			rownumbers:true,
			fit:true,
			columns:[[        
	        {field:'nickname',title:'用户名',width:100},    
	        {field:'aname',title:'采购商名称',width:200},
	        {field:'state',title:'用户状态（0:普通用户,1:管理员,2:禁用用户）',width:200}
	    ]], 
	    toolbar: [{
			iconCls: 'icon-edit',
			handler: update,
			text:'修改',
		},'-',{
			iconCls: 'icon-add',
			handler: showAddDialog,
			text:'添加',
		},'-',{
			iconCls: 'icon-remove',
			text:'删除',
			handler: remove,
		}]
	}) 
	
});
	//1.删除指定行数据
	function remove(){
		var selectedrow=$("#dg").datagrid("getSelected");
		if(selectedrow){
			$.messager.confirm('确认对话框', '您确认要删除数据吗？删除后不可恢复', function(r){
				if (r){
				    // 删除操作;发送一个ajax请求
				    $.get("user/delete",{uid:selectedrow.uid},function(message){
				    	$.messager.show({
							title:'提示消息',
							msg:message.msg,
							timeout:2000,
							showType:'slide'
						});
				    	if(message.success){
				    		$("#dg").datagrid("reload");
				    	}
				    },"json")
				}
			});
		}else{
			$.messager.show({
				title:'提示消息',
				msg:'请选择您要删除的行。',
				timeout:2000,
				showType:'slide'
			});
		}
	}

	//2.添加操作，添加先显示对话框让用户输入
	function showAddDialog(){
		//清空form
		$("#addDialog #ff").form("clear");
		$("#addDialog").dialog("open");
	}
	 //关闭新增窗口
	function closeAddDialog(){
		$("#addDialog").dialog("close");
	}
	//保存新增数据
	function addSubmit(){
		$("#addDialog #ff").form('submit', {    
		    url:'user/add',   
		    onSubmit: function(){    
		        // 做一些验证，提交数据是否合法
		        return $(this).form('validate');

		        // return false to prevent submit;    
		    },    
		    success:function(data){ //这个data不是json对象而是一个字符串 
		    	var message=JSON.parse(data);	    
		    	$.messager.show({
					title:'提示消息',
					msg:message.msg,
					timeout:2000,
					showType:'slide'
				});
		    	if(message.success){
		    		$("#dg").datagrid("reload");
		    		$("#addDialog").dialog("close");
		    	}    
		    }    
		});  
	}
	//3.修改操作 
		//1. 出现编辑窗口，获取老的参数展示给用户
		//2. 用户编辑新内容
		//3. 用户提交
		//4. 刷新页面
		function update(){
			//清空form
			$("#updateDialog #ff").form("clear");
			$("#updateDialog").dialog("open");
			//获取老的参数
			var row = $('#dg').datagrid('getSelected');
			$("#updateDialog #ff").form("load",row);
			 /* $("#sing").checkbox("check");
			 if (row){
			alert('id:'+row.id+"\nusername:"+row.username+"\nemail:"+row.email+"\address:"+row.address+"\hobby:"+row.hobby);
				alert(row.username);
			   $("#updateDialog #ff #username").textbox('setValue',row.username);
			   $("#updateDialog #ff #userpwd").textbox('setValue',row.userpwd);
			   $("#updateDialog #ff #email").textbox('setValue',row.email);
			   $("#updateDialog #ff #address").textbox('setValue',row.address);
			    $("#updateDialog #ff #hobby").prop("checked",true);
				 alert(row.hobby);
			} 	  */
		}
		function closeUpdateDialog(){
			$("#updateDialog").dialog("close");
		}
		function updateSubmit(){
			$("#updateDialog #ff").form('submit', {    
			    url:'user/update',   
			    onSubmit: function(){    
			        // 做一些验证，提交数据是否合法
			        return $(this).form('validate');
			        // return false to prevent submit;    
			    },    
			    success:function(data){ //这个data不是json对象而是一个字符串 
			    	var message=JSON.parse(data);	    
			    	$.messager.show({
						title:'提示消息',
						msg:message.msg,
						timeout:2000,
						showType:'slide'
					});
			    	if(message.success){
			    		$("#dg").datagrid("reload");
			    		$("#updateDialog").dialog("close");
			    	}    
			    }    
			}); 
		}
		
		 
</script>
</head>
<body>
	<table id="dg"></table> 
	<div id="addDialog" class="easyui-dialog" title="新增用户" style="width:600px;padding:10px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
				text:'保存',
				handler:addSubmit
			},{
				text:'关闭',
				handler:closeAddDialog
			}]">

    <form id="ff" method="post">
   	<table style="width:100%;">
    	<tr>
	    	<td>用户名:</td>
	    	<td>
	    	<input class="easyui-textbox" name="username" style="width:100%" data-options="required:true,validType:'length[4,15]'">
	    	</td>
    	</tr>
    	<tr>
	    	<td>密码:</td>
	    	<td>
	    	<input class="easyui-textbox" type="password" id="userpwd" name="upass" style="width:100%" data-options="required:true,validType:'length[9,15]'">
	    	</td>
    	</tr>
    	<tr>
	    	<td>确认密码:</td>
	    	<td>
	    	<input class="easyui-textbox" type="password" style="width:100%" data-options="required:true,validType:'equals[\'#userpwd\']'">
	    	</td>
    	</tr>
    	<tr>
	    	<td>邮箱:</td>
	    	<td>
	    	<input class="easyui-textbox" name="email" style="width:100%;" data-options="multiline:true,validType:'email'">
	    	</td>
    	</tr>	
    </table>
	</form>
	</div>  
	<div id="updateDialog" class="easyui-dialog" title="更新用户" style="width:600px;padding:10px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
				text:'更新',
				handler:updateSubmit
			},{
				text:'关闭',
				handler:closeUpdateDialog
			}]">

    <form id="ff" method="post">
   	<table style="width:100%;">
    	<tr>
	    	<td>用户名:</td>
	    	<td>
	    	<input type="hidden" id="uid" name="uid">
	    	<input class="easyui-textbox"  id="uname" name="uname" style="width:100%" data-options="required:true,validType:'length[4,15]'">
	    	</td>
    	</tr>
    	<tr>
	    	<td>邮箱:</td>
	    	<td>
	    	<input class="easyui-textbox" id="email" name="email" style="width:100%;" data-options="multiline:true,validType:'email'">
	    	</td>
    	</tr>	
    </table>
	</form>
	</div>  
</body>
</html>